<template>
  <div class="record-form">
    <textarea
      v-model="content"
      placeholder="填写巡检记录..."
      rows="3"
    ></textarea>
    <image-uploader v-model="images" />
    <div class="form-actions">
      <button @click="submit">提交记录</button>
    </div>
  </div>
</template>

<script>
import ImageUploader from './ImageUploader.vue'

export default {
  components: { ImageUploader },
  emits: ['submit'],
  data() {
    return {
      content: '',
      images: []
    }
  },
  methods: {
    submit() {
      this.$emit('submit', {
        content: this.content,
        images: this.images.map((img) => img.preview)
      })
      this.reset()
    },
    reset() {
      this.content = ''
      this.images = []
    }
  }
}
</script>

<style scoped>
.record-form {
  margin-bottom: 20px;
}

.form-actions {
  margin-top: 10px;
  text-align: right;
}

button {
  padding: 8px 16px;
  background: #2c7be5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
